<template>
  <AppLayout ref="app" :with-pull-refresh="true" refresher-background="#FF3D3D" @refresh="handleRefresh">
    <!-- 头部基础信息 -->
    <view class="header">
      <!-- 用户信息 -->
      <view class="user-info">
        <image src="/static/user/avatar.png"/>
        <text class="nickname">登录 / 注册</text>
        <navigator class="setting" url="/pages/user/settings">
          <image src="/static/user/center/setting.png"/>
        </navigator>
      </view>
      <!-- 用户数据 -->
      <view class="user-data">
        <view class="data-item">
          <text>10</text>
          <text>商品收藏</text>
        </view>
        <view class="data-item">
          <text>10</text>
          <text>店铺收藏</text>
        </view>
        <view class="data-item">
          <text>10</text>
          <text>我的足迹</text>
        </view>
      </view>
    </view>
    <main>
      <!-- 订单信息 -->
      <view class="module order">
        <navigator>
          <image src="/static/user/center/unpay.png"/>
          <text>待付款</text>
        </navigator>
        <navigator>
          <image src="/static/user/center/unreceive.png"/>
          <text>待收货</text>
        </navigator>
        <navigator>
          <image src="/static/user/center/uncomment.png"/>
          <text>待评价</text>
        </navigator>
        <navigator>
          <image src="/static/user/center/refund.png"/>
          <text>退还/售后</text>
        </navigator>
      </view>
      <!-- 积分/优惠券信息 -->
      <view class="module discount">
        <navigator>
          <text>0</text>
          <text>优惠券</text>
        </navigator>
        <navigator>
          <text>0</text>
          <text>积分</text>
        </navigator>
        <navigator>
          <text>0.00</text>
          <text>余额(元)</text>
        </navigator>
      </view>
      <!-- 服务 -->
      <view class="module services">
        <navigator>
          <image src="/static/user/center/gift.png"/>
          <text>邀请有礼</text>
        </navigator>
        <navigator>
          <image src="/static/user/center/service.png"/>
          <text>客服</text>
        </navigator>
        <navigator>
          <image src="/static/user/center/question.png"/>
          <text>帮助与反馈</text>
        </navigator>
        <navigator>
          <image src="/static/user/center/question.png"/>
          <text>关于平台</text>
        </navigator>
      </view>
    </main>
  </AppLayout>
</template>

<script>
  import AppLayout from '@/layouts/AppLayout'
  export default {
    components: { AppLayout },
    data() {
      return {}
    },
    methods: {
      // 下拉刷新数据
      handleRefresh () {
        console.log('刷新数据')
        setTimeout(() => {
          console.log('数据刷新完成')
          this.$refs.app.refreshDone()
        }, 1500)
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../style/variables";
  // 头像大小
  $avatar-size: 100rpx;
  .header {
    padding: $gap-middle $gap-big;
    box-sizing: border-box;
    background: #FF3D3D;
    color: $font-color-white;
    // 用户信息
    .user-info {
      display: flex;
      align-items: center;
      position: relative;
      // 用户头像
      image {
        height: $avatar-size;
        width: $avatar-size;
        border-radius: 50%;
      }
      // 用户昵称
      .nickname {
        margin-left: $gap-middle;
        font-size: $font-size-big;
      }
      // 设置
      .setting {
        position: absolute;
        top: 28rpx;
        right: 0;
        // 设置图标
        image {
          height: 46rpx;
          width: 46rpx;
        }
      }
    }

    // 用户数据
    .user-data {
      display: flex;
      justify-content: space-between;
      padding: $gap-big $gap-middle $gap-middle $gap-middle;
      box-sizing: border-box;
      // 数据项
      .data-item {
        text-align: center;
        text {
          display: block;
        }
        text:first-of-type {
          font-weight: bold;
          font-size: $font-size-middle;
          line-height: 40rpx;
          margin-bottom: $gap-mini;
        }
      }

    }
  }

  main {
    $radius: 20rpx;
    margin-top: -$radius/2 - 8;
    background: #f5f5f5;
    border-radius: $radius $radius 0 0;
    color: #555;
    // 模块
    .module {
      $icon-size: 70rpx;
      padding: 10px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      align-content: center;
      background: $background-color-module;
      margin-bottom: $gap-middle;
      font-size: $font-size-mini;
      navigator {
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
          height: $icon-size;
          width: $icon-size;
        }
        text {
          line-height: 52rpx;
        }
      }
    }
    // 订单
    .order {
      border-radius: $radius $radius 0 0;
    }
    // 积分
    .discount {
      text:first-of-type {
        font-weight: bold;
        line-height: 80rpx;
      }
    }
    // 服务
    .services {
      justify-content: inherit;
      navigator {
        width: 25%;
        margin: $gap-mini 0;
      }
    }
  }
</style>
